<template>
  <div class="friend-bigo">
    <div class="kanban">
      <div class="image-wrapper">
        <img src="~pages/share/assets/images/gift.jpg">
      </div>
      <div class="lottery-bigo">
        <div class="greetings">
          <p>你的好友刚刚抽中了SNH48大奖</p>
          <p>快来试试你的手气</p>
        </div>
      </div>
      <a @click="ok" class="btn bigo-btn" href="javascript: void 0;">前往抽奖</a>
  </div>
</template>
<script>
  export default {
    methods: {
      ok() {
        this.$emit('friend-bigo-ok');
      }
    }
  }
</script>
<style scoped lang="scss">
  img {
    width: 100%;
    height: auto;
  }
  p {
    line-height: 1.6;
  }
  .bigo-btn {
    display: inline-block;
    width: 4.8rem;
    height: 1.35rem;
    line-height: 1.355rem;
    color: #fff;
    font-size: .45rem;
    text-decoration: none;
    background: url('~pages/share/assets/images/btn-ok.png') no-repeat;
    background-size: 4.8rem 1.35rem;
  }
  .friend-bigo {
    text-align: center;
    background-color: #ffffff;
    .kanban {
      padding-bottom: 0.6rem;
    }
    .lottery-bigo {
      .title {
        text-indent: 0.72rem;
      }
    }
    .greetings {
      font-size: 0.42rem;
      color: #747474;
    }
    .btn {
      width: 4.8rem;
      height: 1.35rem;
      display: inline-block;
      margin-top: 0.7rem;
    }
  }
  .image-wrapper {
    width: 4.2rem;
    height: 4.2rem;
    margin: 0 auto;
  }
</style>

<style lang="scss">
  .modal .friend-bigo {
    margin-top: 1.96rem;
  }
</style>
